<template>
	<view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#4cd964"></uni-segmented-control>
		<view v-show="current === 0">
			<uni-card v-for="(item,index) in showingList" v-if="showingList">
				<uni-row>
					<uni-col :span="4">
						<image :src="item.movieImage"
							style="height: 120px;width: 100px;border-radius: 10px;cursor: pointer;"
							@click="toMovieDetail(item.movieId)"></image>
					</uni-col>
					<uni-col :span="16" style="padding: 15px;font-size: 22px;">
						<uni-row>
							<uni-col :span="24">
								<span style="font-size: 30px;font-weight: bold;">{{item.movieName}}</span>
							</uni-col>
							<uni-col :span="24" style="font-size: 20px;">
								<p style="padding: 12px 0 0 0 ">
									<span>导演：</span>
									<span v-for="(it,id) in item.movieDirector">
										{{it}}
										<span v-if="id+1!=item.movieDirector.length">/</span>
									</span>
								</p>
								<p style="padding: 12px 0 0 0 ">
									<span>演员：</span>
									<span v-for="(it,id) in item.movieActor">
										{{it}}
										<span v-if="id+1!=item.movieActor.length">/</span>
									</span>
								</p>
							</uni-col>
						</uni-row>
					</uni-col>
					<uni-col :span="4" style="padding: 40px 0 0 0;text-align: right;">
						<button style="font-size: 20px;font-weight: bold;color: white;background-color: #ff557f;"
							@click="toMovieBuyList()"> 购票</button>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
		<view v-show="current === 1">
			<uni-card v-for="(item,index) in comingList" v-if="comingList">
				<uni-row>
					<uni-col :span="4">
						<image :src="item.movieImage"
							style="height: 120px;width: 100px;border-radius: 10px;cursor: pointer;"
							@click="toMovieDetail(item.movieId)"></image>
					</uni-col>
					<uni-col :span="16" style="padding: 15px;font-size: 22px;">
						<uni-row>
							<uni-col :span="24">
								<span style="font-size: 30px;font-weight: bold;">{{item.movieName}}</span>
							</uni-col>
							<uni-col :span="24" style="font-size: 20px;">
								<p style="padding: 12px 0 0 0 ">
									<span>导演：</span>
									<span v-for="(it,id) in item.movieDirector">
										{{it}}
										<span v-if="id+1!=item.movieDirector.length">/</span>
									</span>
								</p>
								<p style="padding: 12px 0 0 0 ">
									<span>演员：</span>
									<span v-for="(it,id) in item.movieActor">
										{{it}}
										<span v-if="id+1!=item.movieActor.length">/</span>
									</span>
								</p>
							</uni-col>
						</uni-row>
					</uni-col>
					<uni-col :span="4" style="padding: 40px 0 0 0;text-align: right;">
						<button style="font-size: 20px;font-weight: bold;color: white;background-color: #aa55ff;"
							@click="toMovieBuyList()"> 预购</button>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import api from '../../../api/api'
	import {
		ref,
		onMounted
	} from 'vue'
	const items = ref(['正在热映', '即将上映'])
	const current = ref(0)
	const showingList = ref()
	const comingList = ref()
	const onClickItem = (e) => {
		current.value = e.currentIndex
		if (current.value == 2) {
			uni.reLaunch({
				url: '/pages/film/films/films'
			})
		}
	}
	onMounted(() => {
		getShowingMovieList()
		getComingMovieList()
	})
	const getShowingMovieList = () => {
		api.movie.getShowingMovieList().then(res => {
			if (res.data.code == 0) {
				showingList.value = res.data.data.list
				showingList.value.forEach((item: {
					movieDirector: string;movieActor: string;
				}) => {
					item.movieActor = eval('(' + item.movieActor + ')')
					item.movieDirector = eval('(' + item.movieDirector + ')')
				})
			}
		})
	}
	const getComingMovieList = () => {
		api.movie.getComingMovieList().then(res => {
			if (res.data.code == 0) {
				comingList.value = res.data.data.list
				comingList.value.forEach((item: {
					movieDirector: string;movieActor: string;
				}) => {
					item.movieActor = eval('(' + item.movieActor + ')')
					item.movieDirector = eval('(' + item.movieDirector + ')')
				})
			}
		})
	}
	const toMovieDetail = (id: any) => {
		uni.navigateTo({
			url: '/pages/film/films/filmDetail?movieId=' + id
		})
	}
	const toMovieBuyList = () => {
		uni.navigateTo({
			url: '/pages/film/films/filmBuyList'
		})
	}
</script>

<style>

</style>
